<template>
    <div>
        <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
            <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
        </div>
        <div id="result">
            <!--<input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>-->
            <input type="button" value="清除所有覆盖物" @click="clearAll()"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "mark-map",
        data(){
            return{
                map: null,
                overlays: [],
                parr: []
            }
        },
        props: ['p'],
        watch:{
            parr(newv){
                this.$emit('res3', newv)
            }
        },
        methods:{
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {this.loading.close();},
            buildMap(){
                let self = this;
                // 百度地图API功能
                // var map = new BMap.Map('map');
                this.map = new BMap.Map('map');
                var poi = new BMap.Point(94.789835,40.176318);
                this.map.centerAndZoom(poi, 10);
                this.map.enableScrollWheelZoom();

                if(this.p&&this.p[0]){
                    var marker1 = new BMap.Marker(new BMap.Point(this.p[0], this.p[1]));
                    self.overlays.push(marker1)
                    self.map.addOverlay(marker1);
                }

                this.map.addEventListener('click', (e)=> {
                    self.clearAll()
                    // console.log(e.point)
                    var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
                    self.overlays.push(marker)
                    self.map.addOverlay(marker);
                    self.$emit('point', [e.point.lng, e.point.lat])
                });
            },
            setPoint(point){
                let p = point?point:this.p;
                console.log(p, '拿到')
                if(!p) return;
                let self = this;
                var marker = new BMap.Marker(new BMap.Point(p[0], p[1]));
                self.overlays.push(marker)
                self.map.addOverlay(marker);
                self.overlays.push(marker)
            },
            clearAll() {
                for(var i = 0; i < this.overlays.length; i++){
                    this.map.removeOverlay(this.overlays[i]);
                }
                this.overlays.length = 0
            },
            addTitle(v){
                v.titles.push({key: '',value: ''})
            },
            emit(){
                this.$emit('done', this.parr)
            },
            // 获取路线（画出路线）
            getPipelineList(){
                this.loadopen();
                this.config.get('/api/first/getPipelineList', {}).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        res.data.equipmentPipelineList.forEach(item=>{
                            var plist = []
                            item.route = JSON.parse(item.route)
                            item.route.forEach(it=>{
                                plist.push(new BMap.Point(it.lng, it.lat))
                            });
                            var polyline = new BMap.Polyline(plist, {strokeColor:"#006400", strokeWeight:10, strokeOpacity:0.8});
                            this.map.addOverlay(polyline);
                        })
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                });
            },
        },
        mounted(){
            this.buildMap()
        },
    }
</script>

<style scoped>
    #allmap {width: 100%; height:400px; overflow: hidden;}
    #result {width:100%;font-size:12px;}
    dl,dt,dd,ul,li{
        margin:0;
        padding:0;
        list-style:none;
    }
    p{font-size:12px;}
    dt{
        font-size:14px;
        font-family:"微软雅黑";
        font-weight:bold;
        border-bottom:1px dotted #000;
        padding:5px 0 5px 5px;
        margin:5px 0;
    }
    dd{
        padding:5px 0 0 5px;
    }
    li{
        line-height:28px;
    }
</style>
